<template>
  <div class="app">
    <div class="flintoshow">
      <div id="main_category3" ref="main" style="height: 300px;margin-top: 10px;"> </div>
    </div>
  </div>
</template>
<script>
import { onMounted } from 'vue';
import * as echarts from "echarts";
export default {
  setup() {
    onMounted(() => {
      let myChart = echarts.init(document.getElementById("main_category3"));
      // 绘制图表
      myChart.setOption({
        title: {
          text: '收入分类总结',
          textStyle: {
            fontSize: 15, //字体大小
          },
        },
        legend: {
          data: ['耗材收入', '药物收入', '检查收入', '服务收入']
        },
        grid: {
          left: '5%',
          right: '5%',
          bottom: '18%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          data: ['2022-1', '2022-2', '2022-3', '2022-4', '2022-5', '2022-6']
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            symbol: 'circle',
            name: '耗材收入',
            data: [100, 345, 123, 156, 235, 356],
            type: 'line',
            symbolSize: 7,
            color: '#fa7373',
            lineStyle: { // 设置线条的style等
              normal: {
                color: '#fa7373', // 折线线条颜色
              },
            },
          },
          {
            symbol: 'circle',
            name: '药物收入',
            data: [144, 100, 334, 233, 211, 320],
            type: 'line',
            symbolSize: 7,
            color: '#739ffa',
            lineStyle: { // 设置线条的style等
              normal: {
                color: '#739ffa', // 折线线条颜色
              },
            },
          },
          {
            symbol: 'circle',
            name: '检查收入',
            data: [235, 125, 456, 430, 400, 300],
            type: 'line',
            symbolSize: 7,
            color: '#64c188',
            lineStyle: { // 设置线条的style等
              normal: {
                color: '#64c188', // 折线线条颜色
              },
            },
          },
          {
            symbol: 'circle',
            name: '服务收入',
            data: [122, 134, 232, 432, 456, 457],
            type: 'line',
            symbolSize: 7,
            color: '#a773fa',
            lineStyle: { // 设置线条的style等
              normal: {
                color: '#a773fa', // 折线线条颜色
              },
            },
          }
        ],
      });
    });
  },
  data() {
    return {
    };
  },
  methods: {
  }
};
</script>
<style>
.app {
  margin: 0;
}
</style>